<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>6.v-model练习</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
               <input type="email" v-model="str"> <br><br><br><br>

               <input type="radio" v-model="sex"  value="nan"  name="sex" />男
               <input type="radio" v-model="sex"  value="nv" name="sex" />女
               <h1>我的性别是：{{sex}}</h1>

               <br><br><br><br>


               <input type="checkbox" value="张杰" v-model="arr"> 张杰
               <input type="checkbox" value="刘若英" v-model="arr"> 刘若英
               <input type="checkbox" value="许巍" v-model="arr"> 许巍
               <input type="checkbox" value="周杰伦" v-model="arr"> 周杰伦

               <h1>我喜欢的歌星：{{arr}}</h1>

               <br><br><br><br>


               <textarea v-model="str" cols="30" rows="10"></textarea>
               <br><br><br><br>


               <select v-model="districet">
                    <option value="雁塔区">雁塔区</option>
                    <option value="未央区">未央区</option>
                    <option value="鄠邑区">鄠邑区</option>
                    <option value="长安区">长安区</option>
                    <option value="碑林区">碑林区</option>
               </select>
               <h1>我所在区：{{districet}}</h1>


               <br><br><br><br>

               <br><br><br><br>
               <br><br><br><br>
               <br><br><br><br>
        </div>
    </body>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                str:"随便写一句话",
                sex:"",
                arr:[],
                districet:""
            }
        })
        
    </script>
</html>